import {Menu, Switch} from 'antd';

import React from 'react';
import classNames from 'classnames';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import {connect} from "dva";
import defaultSettings from "../../../config/defaultSettings";

interface ThemeDropdownProps {
  [propName: string]: any;
}

const darkThemeSetting = {
  "navTheme": "dark",
  "primaryColor": "#2F54EB",
  "layout": "sidemenu",
  "contentWidth": "Fluid",
  "fixedHeader": false,
  "autoHideHeader": false,
  "fixSiderbar": false,
  "menu": {
    "locale": true
  },
  "title": "Ant Design Pro",
  "pwa": false,
  "iconfontUrl": "",
  "collapse": true,
  "language": "zh-CN"
};

const updateColorWeak: (colorWeak: boolean) => void = colorWeak => {
  const root = document.getElementById('root');
  if (root) {
    root.className = colorWeak ? 'colorWeak' : '';
  }
};

const mapStateToProps = (state: any) => ({
  settings: state['settings'],
  isDark: localStorage.getItem("theme") === "dark"
});

const ThemeDropdown: React.FC<ThemeDropdownProps> = props => {
  const {dispatch} = props;
  const themeMenu = (
    <Menu>
      <Menu.Item key="0">
        <Switch
          checkedChildren="Dark On"
          unCheckedChildren="Dark Off"
          defaultChecked={props.isDark}
          onChange={(isDark) => {
            console.log('Dark: ', isDark);
            localStorage.setItem("theme", isDark ? "dark" : "light");
            dispatch({
              type: 'settings/changeSetting',
              payload: isDark ? darkThemeSetting : defaultSettings
            });
          }}
        />
      </Menu.Item>
      <Menu.Item key="1">
        <Switch
          checkedChildren="Color Weak On"
          unCheckedChildren="Color Weak Off"
          defaultChecked={false}
          onChange={(isDark) => {
            console.log('Dark: ', isDark);

            // change mode
            updateColorWeak(isDark);
            // updateTheme('#722ED1');
          }}
        />
      </Menu.Item>
    </Menu>
  );
  return (
    <HeaderDropdown overlay={themeMenu} placement="bottomRight">
      <span className={classNames(styles.dropDown, props.className)}>
       <i className="iconfont">&#xe601;</i>
      </span>
    </HeaderDropdown>
  );
};

export default connect(mapStateToProps)(ThemeDropdown);
